
<template>
	<transition name="fade">
		<div
			class="mj-loading"
			v-if="showIt && inited"
			:class="{'modal1':modal == 1,'modal2':modal == 2,'modal3':modal==3}"
			:style="[containeryStyle]"
		>
			<div class="mask-box" v-if="mask" :style="{'opacity':opacity}"></div>
			<div class="loading-box">
				<div class="loading-icon">
					<img :style="[imgWidth]" class="icon-img" v-if="icon" :src="icon" alt>
					<img
						:style="[imgWidth]"
						class="icon-img"
						v-else
						src="../../assets/loading.png"
						alt="loading图片"
					>
				</div>
				<span class="loading-text">{{text}}色发射点法发是</span>
			</div>
		</div>
	</transition>
</template>
<script>
/* eslint-disable */
import Vue from 'vue'
export default {
  name: 'mjLoading',
  data(){
    return {
      showIt: true,
      mask:false,
      text:'',
      opacity:0,
      height:0,
			modal:1,
			icon:null,
      parent:'',
			containeryStyle:null,
			inited:false
    }
	},
	computed: {
		imgWidth(){
			if(this.containeryStyle){
				return {width:`calc(${this.containeryStyle.width} * .106667)`}
			}
			return {}
		}
	},
	created(){
		this.initHeight()
	},
	mounted() {
		this.inited = true
	},
  methods:{
    initHeight(){
			if(this.parent.nodeName==='BODY'){
				this.containeryStyle={
					height:'100vh',
					width:'100vw'
				}
				return this.modal=3
			}
			let _style = window.getComputedStyle(this.parent)
      let height = parseFloat(_style['height'])
      , width = parseFloat(_style['width'])
      let _min = Math.min(height,width)
      // 确定有高度，且大于40px
      if(_min && _min > 40){
        this.parent.style.setProperty('position','relative')
        this.containeryStyle = {
          height:height+'px',
          width:width+'px'
        }
      }else{
        this.modal = 2
        this.containeryStyle = {
          minHeight:'40px',
          minWidth:'40px'
        }
      }
    },
    show({duration=0,text='',mask=false,opacity=0, icon=null}){
      this.text = text
      this.mask = !!opacity||mask
			this.opacity = opacity || ~~mask
			this.icon = icon
      if(duration){
          setTimeout(() => {
            this.close()
        }, duration);
      }
    },
    close(){
      this.showIt = false
       // 去除节点
      setTimeout(() => {
        this.parent.removeChild(this.$el)
        this.$emit('finished')
      }, 600);
    }
  }
};
</script>
<style scoped lang="scss">
%fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
}
%absolute {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1000;
}

%normal {
	position: relative;
	height: 50px;
}
.modal1 {
	@extend %absolute;
}
.modal2 {
	@extend %normal;
}
.modal3 {
	@extend %fixed;
}
.mj-loading {
	.mask-box {
		background: rgba(51, 51, 51, 0.336);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
	}
	.loading-box {
		z-index: 1001;
		display: inline-block;
		position: absolute;
		top: 50%;
		left: 50%;
		max-width: 120px;
		// max-height: 40px;
		transform: translate(-50%, -50%);
		margin: 0 auto;
		padding: 5px 8px;
		border-radius: 5px;
		background: rgba(0, 0, 0, 0.521);
		color: white;
		.loading-icon {
			width: 100%;
			text-align: center;
			// max-width: 40px;
			// max-height: 40px;
		}
		.loading-icon {
			width: 100%;
			height: 100%;
			.icon-img {
				animation: circle 3s infinite linear;
				max-width: 39px;
				min-width: 20px;
				// max-height: 39px;
			}
		}
		.loading-text {
			display: inline-block;
			margin-top: 6px;
		}
	}
	@keyframes circle {
		from {
			transform: rotateZ(0deg);
		}
		to {
			transform: rotateZ(360deg);
		}
	}
}
.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
	opacity: 0;
}
</style>
